<template>
  <div class="user-detail-container">
    <!-- 顶部导航栏 -->
    <van-nav-bar class="top-nav-bar" @click-left="$router.back()">
      <template #left>
        <van-icon name="arrow-left" color="#000" class="top-nav-bar-left-arrow"/>
        <span>个人信息</span>
      </template>
    </van-nav-bar>
    <!-- 头像 -->
    <div class="user-head-picture-box">
      <img :src="userHeadPicture" alt="">
    </div>
    <!-- 用户信息列表 -->
    <div class="user-info-list">
      <div class="list-item">
        <span>用户账号</span>
        <span>{{ userAccount }}</span>
        <!-- <van-icon name="arrow" class="icon"/> -->
      </div>
      <div class="list-item" @click="showDialog('username')">
        <span>用户名</span>
        <span>{{ username }}</span>
        <van-icon name="arrow" class="icon"/>
      </div>
      <div class="list-item" @click="showDialog('userRealName')">
        <span>姓名</span>
        <span>{{ userRealName }}</span>
        <van-icon name="arrow" class="icon"/>
      </div>
      <div class="list-item" @click="showDialog('userGender')">
        <span>性别</span>
        <span>{{ userGender === 'M' ? '男' : '女' }}</span>
        <van-icon name="arrow" class="icon"/>
      </div>
      <div class="list-item" @click="showDialog('userIdCardNumber')">
        <span>身份证号</span>
        <span>{{ userIdCardNumber }}</span>
        <van-icon name="arrow" class="icon"/>
      </div>
      <div class="list-item">
        <span>手机号</span>
        <span>{{ userTelephone }}</span>
        <!-- <van-icon name="arrow" class="icon"/> -->
      </div>
      <div class="list-item" @click="showDialog('userEmail')">
        <span>邮箱</span>
        <span>{{ userEmail }}</span>
        <van-icon name="arrow" class="icon"/>
      </div>
    </div>
    <!-- 修改用户信息弹窗 -->
    <van-dialog v-model="show" :title="changeItem" show-cancel-button @confirm="submitChange" @cancel="clearIpt">
      <!-- 输入框 -->
      <van-field
        center
        v-model="inputValue"
        :maxlength="iptMaxLen"
        :type="iptType"
        :placeholder="DialogIptPlaceholder()"
        class="ipt"
        v-if="showIptOrSelect"
        :clearable="true"
      >
        <template #label>
          <span class="dialog-label">{{changeItem}}</span>
        </template>
      </van-field>
      <!-- 选择框 -->
      <div class="select-box" v-if="!showIptOrSelect">
        <van-radio-group v-model="genderSelect" direction="horizontal">
          <van-radio :name="'M'" checked-color="#ee0a24">男</van-radio>
          <van-radio :name="'F'" checked-color="#ee0a24">女</van-radio>
        </van-radio-group>
      </div>
      <!-- <div class="border-box"></div> -->
    </van-dialog>
  </div>
</template>

<script>
import { Dialog } from 'vant'
import { RadioGroup, Radio } from 'vant'

export default {
  name: 'UserDetailInfo',
  components: {
    [Dialog.Component.name]: Dialog.Component,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
  },
  data() {
    return {
      userHeadPicture: '',
      userAccount: '',
      username: '',
      userRealName: '',
      userGender: '',
      userIdCardNumber: '',
      userTelephone: '',
      userEmail: '',
      show: false, // 是否显示对话框
      changeItem: '', // 当前要进行修改的列表项
      iptType: '', // 输入框的类型
      iptMaxLen: '', // 输入框允许输入的最大字符数
      showIptOrSelect: true, // 默认为true，对话框中显示输入框
      inputValue: '', // 输入框的输入内容
      genderSelect: '', // 对话框选择的性别
    }
  },
  methods: {
    // 对话框中输入框的提示文本
    DialogIptPlaceholder() {
      switch (this.changeItem) {
        case '用户名':
          return '请输入您的新用户名'
        case '姓名':
          return '请输入您的姓名'
        case '身份证号':
          return '请输入您的身份证号码'
        case '邮箱':
          return '请输入您的邮箱'
        default:
          break;
      }
    },
    // 显示对话框，同时动态判断标签显示的内容、输入框的类型、输入框允许输入的最大长度以及是显示输入框还是选择
    showDialog(itemName) {
      switch (itemName) {
        case 'username':
          this.changeItem = '用户名'
          this.show = true
          this.iptType = 'text'
          this.iptMaxLen = this.userConstants.USERNAME_MAX_LENGTH
          this.showIptOrSelect = true
          break;
        case 'userRealName':
          this.changeItem = '姓名'
          this.show = true
          this.iptType = 'text'
          this.iptMaxLen = this.userConstants.USER_REAL_NAME_MAX_LENGTH
          this.showIptOrSelect = true
          break;
        case 'userGender':
          this.changeItem = '请选择您的性别'
          this.show = true
          this.showIptOrSelect = false
          break;
        case 'userIdCardNumber':
          this.changeItem = '身份证号'
          this.show = true
          this.iptType = 'number'
          this.iptMaxLen = this.userConstants.USER_ID_CARD_NUMBER_LENGTH
          this.showIptOrSelect = true
          break;
        case 'userEmail':
          this.changeItem = '邮箱'
          this.show = true
          this.iptType = 'text'
          this.iptMaxLen = this.userConstants.USER_EMAIL_MAX_LENGTH
          this.showIptOrSelect = true
          break;
        default:
          break;
      }
    },
    // 提交修改
    submitChange() {
      if (this.inputValue.length === 0 && this.showIptOrSelect === true) {
        this.$toast.fail('请输入修改数据')
        return
      }
      this.$toast.loading({message: '修改信息提交中...', forbidClick: true})
      // 根据changeItem判断修改的是哪个列表项，然后进行响应的提交
      let field_name = '' // 修改信息项的名
      switch (this.changeItem) {
        case '用户名':
          field_name = 'username'
          this.username = this.inputValue // 页面更新用户输入的修改
          break;
        case '姓名':
          field_name = 'userRealName'
          this.userRealName = this.inputValue // 页面更新用户输入的修改
          break;
        case '请选择您的性别':
          field_name = 'userGender'
          this.userGender = this.genderSelect // 页面更新用户输入的修改
          break;
        case '身份证号':
          field_name = 'userIdCardNumber'
          this.userIdCardNumber = this.inputValue // 页面更新用户输入的修改
          break;
        case '邮箱':
          field_name = 'userEmail'
          this.userEmail = this.inputValue // 页面更新用户输入的修改
          break;
        default:
          break;
      }
      // 发送请求
      this.req.post(
        'user/change/userinfo/',
        {
          token: localStorage.getItem('token'),
          field_name,
          param: this.showIptOrSelect ? this.inputValue : this.genderSelect
        }
      ).then((res)=>{
        this.$toast.clear()
        this.inputValue = ''  // 清除输入
        this.genderSelect = this.userGender // 同步用户信息
        let data = res.data
        if (data.mark === 1) {
          this.$toast.success(data.message)
        } else {
          this.$toast.fail(data.message)
        }
      }, (err)=>{
        this.inputValue = '' // 清除输入
        this.genderSelect = this.userGender // 同步用户信息
        this.$toast.clear()
        this.$toast.fail(err)
      })
    },
    // 清除对话框输入
    clearIpt() {
      this.inputValue = ''
      this.genderSelect = this.userGender
    },
  },
  created() {
    this.req.get(
      'user/userinfo/',
      {
        params: {
          token: localStorage.getItem('token'),
        },
      }
    ).then((res)=>{
      const res_data = res.data.data
      this.userHeadPicture = res_data.userHeadPicture === null ? '' : res_data.userHeadPicture
      this.userHeadPicture = this.userHeadPicture.length === 0 ? this.userConstants.USER_HEAD_PICTURE : this.userHeadPicture
      this.userAccount = res_data.userAccount === null ? '' : res_data.userAccount
      this.username = res_data.username === null ? '' : res_data.username
      this.userRealName = res_data.userRealName === null ? '' : res_data.userRealName
      this.userGender = res_data.userGender === null ? '' : res_data.userGender
      this.genderSelect = this.userGender
      this.userIdCardNumber = res_data.userIdCardNumber === null ? '' : res_data.userIdCardNumber
      this.userTelephone = res_data.userTelephone === null ? '' : res_data.userTelephone
      this.userEmail = res_data.userEmail === null ? '' : res_data.userEmail
    }, err=>{})
  }
}
</script>

<style lang="less" scoped>
// 用户个人信息组件容器样式
.user-detail-container {
  height: 100vh;
  background: #eee;
}
// 用户头像样式
.user-head-picture-box {
  overflow: hidden;
  padding: 2rem 0;
  width: 100%;
  height: 8rem;
  background-color: #fff;
  img {
    display: block;
    margin: 0 auto;
    width: 8rem;
    border-radius: 1rem;
  }
}
// 用户信息列表样式
.user-info-list {
  margin: 0 auto;
  padding: 0 4%;
  width: 92%;
  background-color: #fff;
  .list-item {
    position: relative;
    height: 3.5rem;
    border-top: 1px solid #eee;
    line-height: 3.5rem;
    span:nth-child(1) {
      display: inline-block;
      margin-right: 1rem;
      width: 4rem;
      font-weight: 500;
    }
    span:nth-child(2) {
      color: #333;
    }
    .icon {
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      color: #999;
    }
  }
}
// 对话框中输入框的样式
.ipt {
  margin: 8% auto 10%;
  width: 90%;
  border-bottom: 1px solid #ee0a24;
}
// 对话框中输入框中label的样式
.dialog-label {
  display: inline-block;
  width: 4rem;
  color: #000;
  font-weight: 400;
}
// 对话框中底部边框盒子
.border-box {
  width: 80%;
  margin: 0 auto 10%;
  border-bottom: 1px solid #ee0a24;
}
// 选择框样式
.select-box {
  width: 8rem;
  margin: 2rem auto;
}
</style>